#@layout()
#define main()
<form class="layui-form layui-form-pane f-form" method="post" autocomplete="off">
    #(token)
    <input type="hidden" class="layui-input" name="taskCode" value="10003"/>

    <div class="layui-row layui-col-space1 task-row">
        #@colStart("待同步录制",20)
        <div id="tab_taginput">
            <input id="groupIds" name="groupIds">&nbsp;&nbsp;请在下方选择
        </div>
        #@colEnd()

        <div class="layui-form-mid layui-word-aux"></div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">

        </div>
    </div>
</form>

<ul class="layui-tab-title" id="group_category"></ul>
<table id="maingrid" lay-filter="maingrid"></table>

<script src="/static/libs/layui/layui.all.js"></script>
<script src="/static/bootstrap-tagsinput/js/bootstrap.min.js"></script>
<script src="/static/bootstrap-tagsinput/bootstrap-tagsinput.js"></script>
<link rel="stylesheet" href="/static/bootstrap-tagsinput/css/bootstrap/bootstrap.css">
<link rel="stylesheet" href="/static/bootstrap-tagsinput/bootstrap-tagsinput.css">
<script type="text/html" id="toolbar">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="getCheckData">选择同步方案</button>
        <button id='userBtn_' class="layui-btn layui-btn-normal layui-btn-sm" lay-event="user">
            <i class="layui-icon">&#xe770;</i> 用户
        </button>
    </div>
</script>

#define js()
<script>

    //初始化便签输入框
    $('#groupIds').tagsinput({
        itemValue: 'value',
        allowDuplicates: true,   //可以多次添加相同的标记
        itemText: 'text'
    });

    //标签被创建后
    $('#groupIds').on('itemAdded', function (event) {
        //设置标签输入框的placeholder
        $(".bootstrap-tagsinput > input").attr("placeholder", '')
    });
</script>

<script>
    getGroupCategory();

    gridArgs.title = '';
    gridArgs.dataId = 'id';
    // gridArgs.deleteUrl = '#(path)/portal/xianyu/product/delete';
    // gridArgs.updateUrl = '#(path)/portal/xianyu/product/edit/';
    // gridArgs.addUrl = '#(path)/portal/xianyu/product/add';
    gridArgs.gridDivId = 'maingrid';
    initGrid({
        id: 'maingrid'
        , elem: '#maingrid'
        , cellMinWidth: 100
        , cols: [[
            {title: '主键', field: 'id', width: 35, checkbox: true},
            {title: '序号', type: 'numbers', width: 35},
            {title: '功能名称', field: 'name'},
            {title: '用户名称', field: 'user_code'},
            {title: '创建时间', field: 'create_time'},
            {title: '修改时间', field: 'update_time'},

        ]]
        , url: "#(path)/record/group/list"
        , toolbar: '#toolbar' //开启头部工具栏，并为其绑定左侧模板
        , searchForm: 'searchForm'
    });

    layui.use(['form', 'table'], function () {
        var $ = layui.$
            , layer = layui.layer
            , form = layui.form
            , table = layui.table;

        //全选
        form.on('checkbox(allChoose)', function (data) {
            var child = $("#deviceListDiv input[type='checkbox']");
            child.each(function (index, item) {
                item.checked = data.elem.checked;
            });
            form.render('checkbox');
        });

        form.on('select(deviceGroup)', function (data) {
            let groupId = data.elem[data.elem.selectedIndex].value;
            getDeviceList(groupId, form);
        });

        // form.on('button(reset)', function (data) {
        //     alert("1111");
        //     $(".bootstrap-tagsinput").remove();
        //     $('#groupIds').val("");
        //     layer.msg('清空成功！', {icon: 2});
        // });

        //头工具栏事件
        table.on('toolbar(maingrid)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id);
            var data = checkStatus.data;

            switch(obj.event){
                case 'getCheckData':
                    data.forEach((item, index, array) => {
                        $('#groupIds').tagsinput('add', {"value": item.id, "text": item.name});
                        layer.msg("添加成功")
                    });
                    break;
                case 'user':
                    var url='#(path)/user/upload/file/destribute?groupIds='+$('#groupIds').val();
                    openDialog("录制分发",url,false,null,null);
                    break;
            };
        });
    });

    function getDeviceList(groupId, form) {
        var url = "#(path)/device/group/deviceList?groupId=" + groupId;
        $('#deviceListDiv').empty();
        $.ajax({
            url: url,
            type: "POST",
            // data:params||{},
            success: function (result) {
                if (result.length > 0) {
                    $('#deviceListDiv').append('<input lay-skin="primary" type="checkbox" name="type" lay-filter="allChoose" title="执行设备"/>')
                    $('#deviceListDiv').append('<div class="layui-input-block" id="deviceDiv"></div>');
                }
                for (let i = 0; i < result.length; i++) {
                    let data = result[i];

                    $('#deviceDiv').append('<input type="checkbox" name="deviceId" lay-filter="choiceOne" title="' + data.id + data.name + data.online + '" value="' + data.id + '"/>')
                    if (i % 5 == 0) {
                        $('#deviceDiv').append('<br>')
                    }
                }
                form.render('checkbox');
            }
        });
    }

    function registerGroupCategory() {
        $("ul#group_category").on("click",'li', function(){      //只需要找到你点击的是哪个ul里面的就行
            $("ul#group_category li").css({'background-color' : ""});
            let categoryName = $(this).text();
            if (categoryName) {
                $(this).css({'background-color' : "rgb(64, 158, 255)"});
                //上述方法等价于
                table.reload('maingrid', {

                    where: { //设定异步数据接口的额外参数，任意设
                        categoryName: categoryName
                    }
                    ,page: false
                }); //只重载数据
                //getGroupCategory();
            }
        });
    }


    function getGroupCategory() {
        var url = "#(path)/record/group/getGroupCategory";
        $("#group_category").empty();
        $.ajax({
            url: url,
            type: "GET",
            success: function (result) {
                for (let i = 0; i < result.length; i++) {
                    $('#group_category').append('<li>' + result[i] +'</li>');
                }
            }
        });

        registerGroupCategory();
    }
</script>
#end

#end












